<template>
  <section>
    <el-row type="flex" justify="space-between" class="button-box">
      <el-col :span="6" class="left">
        Topic类列表
      </el-col>
      <el-col :span="18" class="right">
        <el-button type="primary" @click="createTopic">定义Topic类</el-button>
      </el-col>
    </el-row>
    <communication-table :tableColumn="tableColumn" :tableData="tableData" :total="total" @actionClick="actionClick" :buttonGroup="buttonGroup" :pageSize="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></communication-table>

    <product-topic-template :title="'定义Topic类'" :dialogVisible="dialogVisible" @changeVisible="changeVisible" @submitForm="submitForm" :form="form" :tip="tip"></product-topic-template>
  </section>
</template>

<script>
  import utilMixin from '@views/mixin/systemUtil'
  import CommunicationTable from '@components/Table'
  import ProductTopicTemplate from '@views/product/components/ProductTopicTemplate'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    components: {
      CommunicationTable,
      ProductTopicTemplate
    },
    mixins: [utilMixin]
  })
  export default class ProductCommunication extends Vue {
    data() {
      return {
        id: -1, //产品id
        form: {}, //form表单提交对象
        dialogVisible: false, //form表单是否显示
        tip: "Topic规则：Topic格式必须以“/”进行分层，区分每个类目。其中前两个类目已经规定好，第一个代表产品标识productKey，第二个${deviceName}通配deviceName。简单来说，Topic类：/pk/${deviceName}/update是具体Topic： /pk/mydevice/update 或者 /pk/yourdevice/update 的集合", //form表单tip
        tableColumn: [ //表格列对象
          { type: "name", name: "Topic类", operate: false },
          { type: "type", name: "操作权限", operate: false },
          { type: "desc", name: "描述", operate: false }
        ],
        tableData: [], //表格数据
        buttonGroup: [{ name: '编辑' }, { name: '删除' }] //表格按钮数组
      }
    }
    mounted() {
      this.id = this.$route.params.id;
    }
    createTopic() { //创建Topic
      this.dialogVisible = true
    }
    changeVisible(val) { //表单关闭回调方法
      this.dialogVisible = val
    }
    actionClick(rowData, index) { //表单按钮组回调方法
      //1编辑 2删除
      switch (index) {
        case 1:
          this.editClick(rowData)
          break;
        case 2:
          this.deleteClick(rowData)
          break;
      }
    }
    editClick(rowData) { //编辑
      console.log(rowData);
      this.dialogVisible = true
    }
    submitForm() { //表单提交方法
      console.dir(this.form)
      this.dialogVisible = false
    }
    deleteClick(rowData) { //删除
      console.log(rowData);
      this.$msgbox.confirm('确定要删除Topic类：' + rowData.name + '吗？删除Topic将导致设备无法再通过该topic进行数据上下行。', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showMessage('删除Topic类成功', 'success');
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@scss/theme/table.scss';
</style>
